<template>
	<div class="login-section">
		<div class="login-main">
			<div class="title">
				<span>欢迎您，来到</span>
				<h2>社区应急服务</h2>
			</div>
			<div class="form-content">
				<van-form
					@submit="handleOnSubmit"
				>
					<!-- 角色选择 -->
					<van-field
						class="form-item"
						readonly
						name="type"
						:value="roleValue"
						placeholder="请选择角色"
						:rules="[{ required: true, message: '请选择您的角色' }]"
						@click="showPicker = true"
					>
						<template #left-icon>
							<div class="form-icon-item">
								<img class="form-icon" src="../../assets/images/icon_cardid@2x.png" alt=""/>
							</div>
						</template>
					</van-field>
					<!-- 角色选择select -->
					<van-popup 
						v-model="showPicker" 
						round 
						position="bottom"
					>
						<van-picker
							show-toolbar
							:columns="columns"
							@cancel="showPicker = false"
							@confirm="handleRoleConfirm"
						/>
					</van-popup>
					<!-- 用户名 -->
					<van-field
						:clearable="true"
						class="form-item"
						v-model="username"
						name="phone"
						placeholder="请输入用户名或手机号"
						:rules="[{ required: true, message: '请输入用户名或手机号' }]"
					>
						<template #left-icon>
							<div class="form-icon-item">
								<img class="form-icon" src="../../assets/images/icon_username@2x.png" alt=""/>
							</div>
						</template>
					</van-field>
					<!-- 密码 -->
					<van-field
						class="form-item"
						v-model="password"
						:type="passwordType"
						name="password"
						placeholder="请输入密码"
						:rules="[{ required: true, message: '请输入密码' }]"
					>
						<template #left-icon>
							<div class="form-icon-item">
								<img class="form-icon" src="../../assets/images/icon_password@2x.png" alt=""/>
							</div>
						</template>
						<template #right-icon>
							<div class="form-icon-item">
								<img 
									class="form-icon" 
									:src="isPasswordView?require('../../assets/images/icon_view@2x.png'):require('../../assets/images/icon_view_none@2x.png')"
									alt=""
									@click="handlePassWordTypeSwitch"
								/>
							</div>
						</template>
					</van-field>
					<div class="agree-section">
						<van-checkbox 
							class="agree-main"
							name="agree"
							v-model="isAgree"
							shape="square"
							icon-size="16px"
						>
							<span>我同意</span>
							<b @click.stop="handleRouteChange('/secretPolicy')">《隐私条款》</b>
						</van-checkbox>
					</div>
					<div class="submit-btn-wrap">
						<van-button class="submit-btn" block type="info">登录</van-button>
					</div>
				</van-form>
			</div>
		</div>
		<div class="footer">
			<span @click.stop="handleRouteChange('/aboutUs')">关于我们</span>
		</div>
	</div>
</template>

<script>
import {
	login
	// test
} from '../../request/api';
// import axios from 'axios'
export default {
	name:'',
	components: {},
	data() {
		return {
			roleValue:"",
			username: "",
			password: "",
			isAgree: true,
			passwordType:"password",
			showPicker: false,
			columns:[{
				text:'网格员',
				value: '1'
			}, {
				text:'志愿者',
				value: '2'
			}]
		};
	},
	activated(){
		
	},
	mounted(){
		// test()
	},
	computed:{
		isPasswordView: function(){
			return this.passwordType !== "password"
		}
	},
	methods: {
		handlePassWordTypeSwitch(){
			if(this.passwordType==="password"){
				this.passwordType = "text"
			}else{
				this.passwordType = "password"
			}
		},
		handleRoleConfirm(item){
			this.roleValue = item.text
			this.showPicker = false
		},
		handleRouteChange(path){
			if(!path) return
			this.$router.push({
				path
			})
		},
		async handleOnSubmit(params){
			const $this = this
			if(!$this.isAgree){
				$this.$toast({
					message: '请阅读相关条款,如已阅读,请勾选我同意',
					position: 'bottom',
				})
				return
			}
			// console.log($this.$md5(params.password).toUpperCase())
			const type = this.columns.filter((item)=>item.text===params.type)[0].value
			const res = await login({
				...params,
				password:$this.$md5(params.password).toUpperCase(),
				type
			})
			
			if(res){
				this.$store.commit("login/setToken",{
					...res.data.loginToken
				})
				this.$store.commit("login/setAccount",{
					...res.data.userInfo
				})
				$this.$router.replace({
					path:"/home"
				})
			}
		}
	}
}
</script>
<style scoped lang="scss">
@import "../../assets/style/variable.scss";
.login-section{
	height: 100vh;
	background: url(../../assets/images/login-bg.webp) no-repeat center center / cover;
	@include flexCenter;
	align-items: flex-start;
	position: relative;
	.login-main{
		width: 680px;
		padding-top: 200px;
		.title{
			margin-bottom: 30px;
			span{
				font-size: 28px;
			}
			h2{
				font-size: 40px;
			}
		}
		.form-content{
			background: rgba(255,255,255,.5);
			border-radius: 20px;
			padding: 60px 40px;
			.form-item{
				border-radius: 10px;
				margin-top: 30px;
				&:first-child{
					margin-top: 0;
				}
				&:last-child{
					margin-top: 0;
				}
				::v-deep input{
					font-size: 28px;
					box-shadow: 0 0 50px 50px #fff inset;
				}
				
				.form-icon-item{
					height: 100%;
					padding-right: 20px;
					@include flexCenter;
					.form-icon{
						width: 30px;
					}
				}
				
			}
			.agree-section{
				margin: 50px 0;
				.agree-main{
					@include flexCenter;
					justify-content: flex-start;
					font-size: 28px;
					b{
						color: $color-blue;
					}
					::v-deep i{
						border-radius: 6px;
					}
				}
			}
			.submit-btn-wrap{

				.submit-btn{
					width: 100%;
					height: 80px;
					border-radius: 50px;
					font-size: 32px;
					color: #fff;
					background: linear-gradient(90deg, #2495FD, #0BB7FF);
					border: none;
				}
			}
		}
	}
	.footer{
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		text-align: center;
		span{
			font-size: 26px;
			color: #999;
			line-height: 60px;
		}
	}
}
</style>